<html>
    <head>
        <meta charset="UTF-8">
        <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/components.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/login.css" rel="stylesheet" type="text/css"/>
        <script src="static/js/jquery-1.11.1.min.js" type="text/javascript"></script>
    </head>
    <body class="login">
        <div class="content">
            <h3 class="form-title">商品详情 </h3>
            <div id="promoStartDateContainer" class="form-group">
                <label style="color: red" class="control-label">秒杀开始时间</label>
                <div>
                    <label style="color: red" class="control-label" id="promoStartDate"/>
                </div>
            </div>
            <div class="form-group">
                <div>
                    <label class="control-label" id="title"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">商品描述</label>
                <div>
                    <label class="control-label" id="description"/>
                </div>
            </div>
            <div id="normalPriceContainer" class="form-group">
                <label class="control-label">价格</label>
                <div>
                    <label class="control-label" id="price"/>
                </div>
            </div>
            <div id="promoPriceContainer" class="form-group">
                <label style="color: red" class="control-label">秒杀价格</label>
                <div>
                    <label style="color: red" class="control-label" id="promoPrice"/>
                </div>
            </div>
            <div class="form-group">
                <div>
                    <img style="width:100px; height:auto" id="imgUrl"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">库存</label>
                <div>
                    <label class="control-label" id="stock"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">销量</label>
                <div>
                    <label class="control-label" id="sales"/>
                </div>
            </div>
            <div class="form-actions">
                <button class="btn blue-steel" id="createOrder" type="submit">
                    下单
                </button>
                <button class="btn green-haze" id="back" type="submit">
                    返回
                </button>
            </div>
        </div>
    </body>
    <script>
        function getParam(paramName) {
            paramValue = "", isFound = !1;
            if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
                arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;
                while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
            }
            return paramValue == "" && (paramValue = null), paramValue
        }

        var g_itemVO = {};
        jQuery(document).ready(function () {
            //先藏住秒杀
            // $("#promoStartDateContainer").hide();
            // $("#promoPriceContainer").hide();

            // 返回商品列表页面
            $("#back").on("click", function () {
                window.location.href = "listitem.html";
            })

            //获取商品详情
            $.ajax({
                type: "GET",
                url: "http://localhost:8090/item/get",
                data: {
                    "id": getParam("id"),
                },
                //xhrFields 允许ajax跨域请求 授信, 与后端 ALLOW_CREDENTIALS, 遥相呼应
                xhrFields: {withCredentials: true},
                success: function (data) {
                    if (data.status === "Success") {
                        // alert("获取信息成功");
                        g_itemVO = data.data;
                        reloadDom();
                        setInterval(reloadDom, 1000);
                    } else {
                        alert("获取信息未成功, 原因为" + data.data.errMsg);
                    }
                },
                error: function (data) {
                    alert("获取信息失败, 原因为" + data.responseText);
                }
            });

            //下单
            $("#createOrder").on("click", function () {
                $.ajax({
                    type: "POST",
                    contentType: "application/x-www-form-urlencoded",
                    url: "http://localhost:8090/order/createOrder",
                    data: {
                        "itemId": g_itemVO.id,
                        //暂时写死购买一件
                        "amount": 1,
                        //如果为空, 正好是null, 符合定义, 如果正在进行秒杀, 则能够获得promoId
                        "promoId": g_itemVO.promoId

                    },
                    //xhrFields 允许ajax跨域请求 授信, 与后端 ALLOW_CREDENTIALS, 遥相呼应
                    xhrFields: {withCredentials: true},
                    success: function (data) {
                        if (data.status === "Success") {
                            alert("下单成功");
                            // 刷新前端页面
                            window.location.reload();
                        } else {
                            alert("下单未成功, 原因为" + data.data.errMsg);
                            if (data.data.errCode === 20003) {
                                window.location.href = "login.html";
                            }
                        }
                    },
                    error: function (data) {
                        alert("下单失败, 原因为" + data.responseText);
                    }
                });
            })
        });

        function reloadDom() {
            $("#title").text(g_itemVO.title);
            $("#description").text(g_itemVO.description);
            $("#price").text(g_itemVO.price);
            $("#imgUrl").attr("src", g_itemVO.imgUrl);
            $("#stock").text(g_itemVO.stock);
            $("#sales").text(g_itemVO.sales);

            if (g_itemVO.promoStatus === 1) {
                // $("#promoStartDateContainer").show();
                // $("#promoPriceContainer").show();
                // // 秒杀活动 未开始
                var startTime = g_itemVO.startDate.replace(new RegExp("-", "gm"), "/");
                startTime = (new Date(startTime)).getTime();
                var nowTime = Date.parse(new Date());
                var deltime = (startTime - nowTime) / 1000;
                if (deltime <= 0) {
                    //活动开始了
                    g_itemVO.promoStatus = 2;
                    reloadDom();
                }

                // $("#promoStartDate").text("秒杀将于: "+g_itemVO.startDate+"开始");
                $("#promoStartDate").text("秒杀活动将于" + g_itemVO.startDate + ", 开始 倒计时: " + deltime + " 秒");
                $("#promoPrice").text(g_itemVO.promoPrice);
                // 如果 秒杀活动 未开始, 则冻结下单流程
                $("#createOrder").attr("disabled", true);
            } else if (g_itemVO.promoStatus === 2) {
                // 秒杀活动 ing
                $("#promoStartDate").text("秒杀进行中...");
                $("#promoPrice").text(g_itemVO.promoPrice);
                $("#createOrder").attr("disabled", false);
                $("#normalPriceContainer").hide();
            }
        }

    </script>
</html>
